<template>
  <div class="mod-home-adv">
    <!-- TODO 表格高度自适应实现 -->
    <data-table ref="dataTableRef" :criterias="criterias" name="home-adv" :initLoad="true" url="/coupon/home-adv/select">
      <!-- ----------------------------------------- 查询条件 ----------------------------------------- -->
      <template v-slot:search="criterias">
        <dt-search-item label="广告名称" prop="name">
          <el-input v-model="criterias.name.value" clearable placeholder="输入广告名称"></el-input>
        </dt-search-item>
      </template>
      <!-- ------------------------------------------ 工具栏 ------------------------------------------ -->
      <template v-slot:toolbar>
        <el-button-group>
          <el-button v-if="admin.isAuth('coupon:home-adv:save')" @click="() => addHomeAdvEvent()" type="primary"> 新增 </el-button>
          <el-button v-if="admin.isAuth('coupon:home-adv:save')" @click="() => updateHomeAdvEvent()" type="warning"> 修改 </el-button>
          <el-button v-if="admin.isAuth('coupon:home-adv:delete')" @click="() => deleteHomeAdvEvent()" type="danger"> 删除 </el-button>
          <el-button v-if="admin.isAuth('coupon:home-adv:load-cache')" @click="() => loadHomeAdvEvent()" type="danger"> 刷新 </el-button>
        </el-button-group>
      </template>
      <!-- ---------------------------------------- 数据表格列 ---------------------------------------- -->
      <el-table-column fixed prop="name" show-overflow-tooltip align="left" label="广告名称" width="260" />
      <el-table-column prop="logo" align="center" label="广告图片" width="100">
        <template #default="scope">
          <!-- TODO 遮盖罩不能居上 -->
          <el-image style="width: 40px; height: 40px" fit="fill" :src="scope.row.pic" :preview-src-list="[scope.row.pic]" close-on-press-escape hide-on-click-modal />
        </template>
      </el-table-column>
      <el-table-column prop="endTime" align="center" label="广告时间" width="180" sortable="custom">
        <template #default="scope">
          <div>开始时间：{{ scope.row.startTime }}</div>
          <div>结束时间：{{ scope.row.endTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="上线/下线" width="100">
        <template #default="scope">
          <el-switch v-model="scope.row.status" inline-prompt 
                      :disabled="!admin.isAuth('coupon:home-adv:switch-status')" @change="switchStatusEvent(scope.row)" 
                      :active-value="1" :inactive-value="0" active-text="上线" inactive-text="下线" />
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" label="广告类型" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.type === 1">首页大图</el-tag>
          <el-tag v-if="scope.row.type === 2">首页小图</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" align="right" label="排序" width="80" sortable="custom" />
      <el-table-column prop="clickCount" align="right" label="点击数" width="120" sortable="custom" />
      <el-table-column prop="orderCount" align="right" label="订单数" width="120" sortable="custom" />
      <el-table-column prop="note" show-overflow-tooltip align="left" label="备注" width="260" />
    </data-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @loadTableData="loadTableData" />
  </div>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import http from "@/utils/httpRequest";
import { ElMessage } from "element-plus";
import { ref, nextTick, reactive } from "vue";

import AddOrUpdate from "./home-adv-add-or-update.vue";

// 查询条件
const criterias = reactive({
  name: {
    type: "ll",
    value: "",
  },
});

// 新增修改弹窗是否显示
const addOrUpdateVisible = ref(false);

// 弹窗引用
const addOrUpdateRef = ref();

// 数据表格引用
const dataTableRef = ref();

// 新增广告
const addHomeAdvEvent = async () => {
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("add");
};

// 修改广告
const updateHomeAdvEvent = async () => {
  let data = admin.obtainOneSelectionTableData(dataTableRef.value);
  if (!data) {
    return;
  }
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("update", data);
};

// 删除广告
const deleteHomeAdvEvent = () => {
  admin.batchDeleteSelectionTableData(dataTableRef.value, "/coupon/home-adv/delete");
};

// 刷新广告
const loadHomeAdvEvent = () => {
  http
    .post({
      url: "/coupon/home-adv/load-cache",
    })
    .then(async ({ data }) => {
      if (http.success(data)) {
        ElMessage.success("操作成功");
      }
    });
};

// 切换广告状态事件
const switchStatusEvent = (d) => {
  http
    .post({
      url: "/coupon/home-adv/switch-status",
      data: {
        id: d.id,
        status: d.status
      },
    })
    .then(async ({ data }) => {
      if (http.success(data)) {
        d.status === 1 ? ElMessage.success("上线成功") : ElMessage.warning("下线成功");
      }
      loadTableData();
    });
};

// 初始化列表
const loadTableData = () => {
  dataTableRef.value.loadTableData();
};
</script>
